<template>
  <div class="details">
    <header>
      <div class="bd" :class="showBar?'active':''">
        <div class="left" @click="goBack"><van-icon name="arrow-left" size="20"/></div>
        <div class="nav" v-show="showBar">
          <div>商品详情</div>
          <div>商品评价</div>
        </div>
        <div class="right" @click="goPath"><van-icon name="home-o" size="20" /></div>
      </div>
    </header>
  <div v-for="item in dataList" :key="item.id">
      <section>
        <div class="img">
          <van-swipe @change="onChangeImg">
            <van-swipe-item v-for=" img in item.imgSwiper" :key="img.id">
              <img
                :src="img.imgUrl"
                alt=""
              />
            </van-swipe-item>
            <template #indicator>
              <div class="custom-indicator">{{ current + 1 }}/{{item.imgSwiper.length}}</div>
            </template>
          </van-swipe>
        </div>
        <div class="content">
          <h1>{{item.title}}</h1>
          <div>{{item.info}}</div>
        </div>
        <div class="price">
          <div class="new-p">
            <p>
              ￥
              <b>{{item.price}}</b>
            </p>
            <span>/ 100g</span>
          </div>
          <div class="old-p">
            <span>价格:</span>
            <del>¥{{item.oldPrice}}</del>
          </div>
        </div>
        <div class="additional">
          <div class="add-t">
            <van-coupon-cell
              :coupons="coupons"
              :chosen-coupon="chosenCoupon"
              @click="showList = true"
            />
            <!-- 优惠券列表 -->
            <van-popup
              v-model="showList"
              round
              position="bottom"
              style="height: 90%; padding-top: 4px"
            >
              <van-coupon-list
                :coupons="coupons"
                :chosen-coupon="chosenCoupon"
                :disabled-coupons="disabledCoupons"
                @change="onChange"
                @exchange="onExchange"
              />
            </van-popup>
          </div>
          <div class="add-b">
              
              <van-cell is-link @click="show = true" class="cell">
                <div class="cell">
                      <span>服务</span>
                     <div class="cell-t">
                          <div>
                              <van-icon name="passed" color="red"/>
                              满99元包邮
                          </div>
                          <div>
                              <van-icon name="passed" color="red" />
                              48小时发货
                          </div>
                          <div>
                              <van-icon name="passed" color="red" />
                              7天无理由退货
                          </div>
                     </div>
                </div>
              </van-cell>
              <van-popup v-model="show" position="bottom" :style="{ height: '60%' }" >
                  <van-cell-group inset>
                      <h5>基础服务</h5>
                      <van-cell title="全国包邮"  label="单笔订单满99元，全国包邮（注：新疆、西藏部分偏远地区，港澳台及海外地区不在包邮城市范围内，需补贴部分邮资，具体客服联系告知,谢谢！)"/>
                      <van-cell title="48小时发货" label="四十八小时内极速发货。" />
                      <van-cell title="七天无理由退换" label="购买商品7日内（自用户收到商品之日起计算），在保证商品完好的前提下，可申请无理由退换货。" />
                  </van-cell-group>
                   <van-button type="danger" size="large" class="btn"  @click="show = false">完成</van-button>
              </van-popup>
          </div>
        </div>
        <div class="detail_box">
          <div class="hd">
              <van-icon name="info-o" size="15" color=' #DD2727' />
              <b>商品详情</b>
          </div>
          <div class="img">
              <ul>
                  <li v-for="goods in item.goodsList" :key="goods.id">
                      <img :src="goods.imgUrl" alt=""> 
                  </li>
              </ul>
          </div>
        </div>
        <div class="detail_box detail-pl">
              <div class="hd">
                  <van-icon name="volume-o" />
                  <b>茶友点评</b>
              </div>
              <div class="pl">
                  <van-cell-group>
                      <van-cell  v-for="item in 4" :key="item">
                          <template #title>
                              <img src="http://img.tea7.com/0139968_0.jpeg?x-oss-process=image/resize,w_150" alt="" style="width: 30px;height: 30px;border-radius: 15px;">
                              <span>Smile for life</span>
                          </template>
                          <template #default>
                              <van-rate v-model="value"/>
                          </template>
                          <template #label>
                              <p>此用户尚未填写评论内容</p>
                              <div class="time">
                                  <span>2022-12-15 12:39</span>
                              </div>
                          </template>
                      </van-cell>
                  </van-cell-group>
              </div>
        </div>
        <div class="load_adgroup">
            <img src="http://img.tea7.com/0167640_0.jpeg?x-oss-process=image/resize,w_640" alt="">
        </div>
      </section>
      
      <van-popup v-model="showSku" position="bottom" :style="{ height: '80%' }">
          <div class="summary">
              <div class="img">
                <img :src="item.goodsImg" alt="">
              </div>
              <div class="main">
                <div class="price">¥{{item.price}}</div>
                <div class="title">{{item.title}}</div>
                <div class="stock">
                  <label>库存</label>
                  <span>{{item.goodsNum}}件</span>
                </div>
              </div>
              <van-icon name="cross"  size="25" color="#b3b3b3" class="icon" @click="showSku =false"/>
          </div>
          <div class="step">
            <h2>数量</h2>
            <van-stepper v-model="stepVal" />
          </div>
         <div class="btn"> 
            <van-button type="danger" size="large" v-if="!showBtn" @click="goOrder">去支付</van-button>
            <van-goods-action v-if="showBtn">
            <van-goods-action-button type="warning" text="加入购物车"  @click="addCard" />
            <van-goods-action-button type="danger" text="立即购买" @click="goOrder" />
      </van-goods-action>
          </div>
      </van-popup>
  </div>
    <footer>
      <van-goods-action>
          <van-goods-action-icon icon="chat-o" text="客服" dot />
          <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="goCard" />
          <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
          <van-goods-action-button type="warning" text="加入购物车"  @click="goAddsku" />
          <van-goods-action-button type="danger" text="立即购买" @click="goSku" />
    </van-goods-action>
    </footer>
  </div>
</template>

<script>
// import Sku from '@/components/list/Sku.vue'
import {getDetails} from '@/utils/api/api'
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠12元',
  reason: '',
  value: 150,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '1.5',
  unitDesc: '元',
};
export default {
  components: {
  },

  data() {
    return {
      id: null,
      dataList:[],
      current: 0,
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
      show:false,
      value:3,
      showBar :false,
      showSku:false,
      stepVal:1,
      showBtn: false
    };
  },
  beforeMount() {
    this.id = this.$route.params.id;
    getDetails(this.id).then(res => {
      console.log(res.data.data.data);
      this.dataList = res.data.data.data
    })
    this.$nextTick(() => {
      window.addEventListener('scroll',() => {
        let top = document.documentElement.scrollTop || document.body.scrollTop
        // console.log(top);
        if(top> 300) {
            this.showBar =true
        } else {
          this.showBar = false
        }
      })
    })
  },
  methods: {
    onChangeImg(index) {
      this.current = index;
    },
     onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
     onExchange(code) {
      this.coupons.push(coupon);
    },
    goBack() {
      this.$router.go(-1)
    },
    goPath() {
      this.$router.push('/')
    },
    addCard () {
      this.showSku = false
      this.$store.commit("addCart",{id:this.id,stepVal:this.stepVal})
    },
    goCard() {
      this.$router.push('/cart')
    },
    goSku() {
       this.showSku = true
      this.showBtn = false
    },
    goAddsku () {
     this.showSku = true
     this.showBtn = true
    },
    goOrder () {
      // this.$router.push({
      //   name:'order',
      //   params:{
      //     id:this.id,
      //     num:this.stepVal,
      //     price:this.dataList[0].price,
      //     title:this.dataList[0].title,
      //     img: this.dataList[0].goodsImg,
      //   }
      // })
      this.$router.push('/order')
      this.$store.commit("payOrder",{id:this.id,stepVal:this.stepVal})
    }
  },
};
</script>

<style lang="less" scoped>
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 2px;
}
.details {
  header {
    height: 44px;
    text-align: center;
    font-size: 16px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    .active {
        background: #fff;
        .left,.right {
          background-color:#fff !important;
          color: #222 !important;
        }
    }
    .bd {
      display: flex;
      justify-content: space-between;
      .nav {
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .left,
      .right {
        width: 34px;
        height: 34px;
        margin: 5px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.3);
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  section {   
    .img {
      width: 100%;
      img {
        width: 100%;
      }
    }
    .content {
      padding: 0.7031rem;
      border-top: 1px solid #e3e5e9;
      h1 {
        font-size: 18px;
        color: #232326;
        overflow: hidden;
        line-height: 1.4;
        font-weight: 400;
      }
      div {
        font-size: 14px;
        color: #999;
        padding-top: 0.2344rem;
      }
    }
    .price {
      line-height: 1;
      padding: 0 0.7031rem 0.7031rem;
      background: #fff;
      border-bottom: 1px solid #e1e1e1;
      .new-p {
        padding-top: 11.25px;
        border-top: 1px solid #e2e4e9;
        p {
          margin-right: 5px;
          line-height: 1;
          color: #d22531;
          display: inline-block;
          b {
            font-size: 28px;
          }
        }
        span {
          color: #949494;
          word-spacing: 5px;
          font-size: 15px;
        }
      }
      .old-p {
        padding-top: 7.5px;
        color: #999;
        font-size: 13px;
      }
    }
    .additional {
            border-top: 1px solid #f4f4f4;
            border-bottom: 1px solid #f4f4f4;
            background-color: #f4f4f4;
            padding: 10px 0;
            width: 100%;
            overflow: hidden;
        .add-b {
            .cell {
                display: flex;
                justify-content: space-around;
                span {
                    color: #999;
                }
                .cell-t {
                    display: flex;
                    justify-content: space-between;
                    font-size: 12px;
                    div {
                        padding-right: .4375rem;
                    }
                }
            }
            h5 {
                font-size: 16px;
                text-align: center;
                height: 60px;
                line-height: 60px;
            }
            .btn {
                position: absolute;
                bottom: 0;
                left: 0;
            }
            
        }
    }
    .detail_box {
            background-color: #fff;
            padding: 10px;
            margin-top: 10px;
            border-top: 1px solid #f4f4f4;
            border-bottom: 1px solid #f4f4f4;
        .hd {
            font-size: 15px;
           b {
             margin-left: 10px;
           }
        }
        .img {
            width: 100%;
            padding: 10px 0;
            ul {
                li {
                    img {
                        width: 100%;
                        border: 0;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
    .detail-pl {
        .pl {
            width: 100%;
            p {
                padding: 5px 0;
                color: #666;
            }
            .time {
                width: 100%;
                color: #999;
                font-size: 12px;
            }
        }
    }
    .load_adgroup {
      margin-top: 30px;
    }
  }
  .summary {
    display: flex;
    padding: 10px;
    border: 1px solid #ddd;
    .img {
      width: 79px;
      height: 79px;
      background-color: #fff;
      z-index: 99999;
      padding: 2px;
      border: 1px solid #ddd;
      margin-right: 10px;
    }
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      color: #333;
      font-size: 14px;
      .price {
        color: #DD2727;
        font-size: 19px;
      }
    }
  }
  .step {
    padding: 12px;
    h2 {
      color: #666;
      font-weight: 400;
      font-size: 12px;
      margin-bottom: 8px;
    }
  }
  .btn {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
  }
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>